<!-- * 文件名：申请合伙人
* 作者：ZQK
* 描述：〈描述〉
* 修改人：ZQK
* 修改时间：2025-3-9  -->
<template>
    <view class="partner">
        <image class="logo" :src="getUrl('/partner_recruit.png')" mode=""></image>
        <view class="content">
            <view class="cell">
                <view class="cellTitle">
                    <view class="cellTitleText">姓名</view>
                </view>
                <view class="cellContent">
                    <u-input v-model="username" type="text" placeholder="请填写" placeholder-style="color: #A3A3A3" />
                </view>
            </view>
            <view class="cell">
                <view class="cellTitle">
                    <view class="cellTitleText">手机号</view>
                </view>
                <view class="cellContent">
                    <u-input v-model="phone" type="text" placeholder="请填写" placeholder-style="color: #A3A3A3" />
                </view>
            </view>
            <view class="cell">
                <view class="cellTitle">
                    <view class="cellTitleText">身份证号</view>
                </view>
                <view class="cellContent">
                    <u-input v-model="idcard" type="text" placeholder="请填写" placeholder-style="color: #A3A3A3" />
                </view>
            </view>
            <view class="cell">
                <view class="cellTitle">
                    <view class="cellTitleText">实名认证状态</view>
                </view>
                <view class="cellContent verifyGroup">
                    <view :class="verifyResult === true ? 'success' : 'fail'">{{verifyResult === true ? '已通过' : '未通过'}}
                    </view>
                    <button class="verifyBtn" v-if="verifyResult === false" @click="handleVerify()">验证</button>
                </view>
            </view>
            <view class="agreement">
                <u-checkbox-group>
                    <u-checkbox v-model="checkbox" shape="circle" activeColor="#5EB847" :name="true">
                    </u-checkbox>
                </u-checkbox-group>
                <view class="agree-text">
                    请先阅读并同意
                    <view class="agree-text-h" @click="toHtmlPage('合伙人服务协议')">《绿电先生合伙人服务协议》</view>
                </view>
            </view>
        </view>
        <view class="btnBox">
            <view class="btnLeft" @click="handleToHome">返回</view>
            <view class="btnRight" @click="handleToRecruit">申请</view>
        </view>
    </view>
</template>

<script setup lang="ts">
    import { reactive, ref } from 'vue'
    import { onShow, onLoad } from "@dcloudio/uni-app"
    import { getUrl } from '@/utils/imagePlugin'
    import Api from '@/api/modules/home.ts'

    let username = ref<string>('')
    let phone = ref<string>('')
    let idcard = ref<string>('')
    let checkbox = ref<boolean>(false)
    let verifyResult = ref<boolean>(false)

    const handleVerify = async () => {
        try {
            const res = await uniCloud.callFunction({
                name: 'lvdianVerify',
                data: {
                    realName: username.value,
                    idCard: idcard.value,
                    mobile: phone.value,
                }
            });
            console.log(res);
            if (res.result && res.result.status === 1) {
                verifyResult.value = true;
                uni.showToast({ title: '实名认证成功', icon: 'success' });
            } else {
                uni.showToast({ title: '实名认证失败', icon: 'none' });
                console.log(res);
            }
        } catch (error) {
            console.error('认证过程出错:', error);
            uni.showToast({ title: '认证过程出错', icon: 'none' });
        }
    }

    const toHtmlPage = (type : string) => {
        uni.navigateTo({
            url: '/pages/document/document?type=' + type
        })
    }

    const handleToHome = () => {
        uni.navigateBack();
    }

    let btnLoading = ref<boolean>(false)
    const handleToRecruit = () => {
        if (!checkbox.value) {
            uni.showToast({ title: '为了更好的保障您的权益，请您阅读并同意《用户协议》和《隐私政策》', icon: 'none' });
            return;
        }
        if (!username.value) {
            uni.showToast({ title: '请输入姓名', icon: 'none' });
            return;
        }
        if (!phone.value) {
            uni.showToast({ title: '请输入手机号', icon: 'none' });
            return;
        }
        if (!idcard.value) {
            uni.showToast({ title: '请输入身份证号', icon: 'none' });
            return;
        }
        if (!verifyResult.value) {
            uni.showToast({ title: '请先通过实名认证', icon: 'none' });
            return;
        }
        if (btnLoading.value) {
            return;
        }
        btnLoading.value = true

        let params = {
            nickname: username.value,
            phone: phone.value,
            idcard: idcard.value
        }
        Api.applyPartner(params).then((res : any) => {
            uni.showToast({ title: '申请成功！', icon: 'none' });
            setTimeout(() => {
                uni.navigateBack();
                btnLoading.value = false
            }, 1500)
        }).catch(() => {
            btnLoading.value = false
        })
    }

    onLoad((options : any) => {
        phone.value = options.phone
    })
</script>

<style lang="scss" scoped>
    .partner {
        display: flex;
        flex-direction: column;
        align-items: center;
        height: 100vh;
        position: relative;

        .logo {
            width: 100%;
            height: 600rpx;
        }

        .content {
            width: 100%;

            .cell {
                display: flex;
                align-items: center;
                font-size: 26rpx;
                line-height: 80rpx;
                height: 80rpx;
                border-bottom: 1rpx solid #c5c5c5;
                padding: 0 40rpx;

                .cellTitle {
                    position: relative;
                    width: 180rpx;

                    .asterisk {
                        position: absolute;
                        top: 8rpx;
                        left: -20rpx;
                        font-size: 36rpx;
                        color: #C35736;
                        font-weight: 600;
                        display: flex;
                        align-items: center;
                        margin-right: 4rpx;
                    }

                    .cellTitleText {
                        color: #666666;
                    }
                }

                .cellContent {
                    flex: 1;
                    display: flex;
                    align-items: center;
                    min-height: 70rpx;

                    .reportBox {
                        flex: 1;
                        display: flex;
                        flex-wrap: wrap;

                        .noneReport {
                            color: #A3A3A3;
                            flex: 1;
                        }

                        .reportList {
                            flex: 1;
                            margin-right: 16rpx;
                        }
                    }
                }

                .verifyGroup {
                    justify-content: space-between;

                    .success {
                        color: #5EB847;
                    }

                    .fail {
                        color: #C35736;
                    }

                    .verifyBtn {
                        color: #5EB847;
                        margin: 0;
                        font-size: 12px;
                    }
                }
            }
        }

        .agreement {
            display: flex;
            justify-content: center;
            margin: 40upx 0;

            .agree-text {
                display: flex;
                align-items: center;
                flex-wrap: wrap;
                color: #666;
                text-align: center;
                font-family: "PingFang SC";
                font-size: 12px;
                font-style: normal;
                font-weight: 400;
                line-height: normal;

                .agree-text-h {
                    color: #5EB847;
                    margin: 0 12rpx;
                }
            }

        }

        .btnBox {
            width: 100%;
            padding: 0 40rpx;
            position: absolute;
            bottom: 80rpx;
            display: flex;
            justify-content: space-between;

            .btnLeft {
                width: 47%;
                background: #ffffff;
                border: 1rpx solid #5EB847;
                padding: 20rpx;
                color: #5EB847;
                border-radius: 50rpx;
                font-size: 36rpx;
                display: flex;
                justify-content: center;
                align-items: center;
            }

            .btnRight {
                width: 47%;
                background: #5EB847;
                border: 1rpx solid #ffffff;
                padding: 20rpx;
                color: #ffffff;
                border-radius: 50rpx;
                font-size: 36rpx;
                display: flex;
                justify-content: center;
                align-items: center;
            }
        }
    }
</style>